<template>
    <div class="bg_component">
        <el-row :gutter="20">
            <div style="float:left">
                <el-tabs
                    tab-position="left"
                    class="2dtab"
                    :class="{'smallTab': isSmall}"
                    v-model="curTab"
                    style="height: 120px;float:left;"
                    :style="{'width':isSmall ? '310px' :'350px'}"
                >
                    <el-tab-pane label="2D背景：" name="2d">
                        <div >
                            <div
                                v-if="d2BgImage"
                                class="img_container"
                                @click="selectImage('2d')"
                                :class="{'small_con':isSmall}">
                                <img :src="d2BgImage" alt />
                                <p class="top_panel">
                                  <span title="添加滤镜">
                                    <svg class="icon btn" aria-hidden="true" @click.stop="addFilter">
                                      <use xlink:href="#ss-lvjing1"></use>
                                    </svg>
                                  </span>
                                  <span title="删除">
                                    <svg class="icon btn" aria-hidden="true" @click.stop="del2d">
                                      <use xlink:href="#ss-shanchu"></use>
                                    </svg>
                                  </span>
                                  
                                </p>
                                <p class="bottom_panel">
                                    点击更换图片
                                </p>
                            </div>
                            <div v-else class="selectBtn boxs">
                                <el-button
                                    v-if="!d2BgImage"
                                    type="text"
                                    @click="selectImage('2d')"
                                >点击选择</el-button>
                            </div>
                        </div>
                        <!-- <el-image
                            v-if="d2BgImage"
                            fit="contain"
                            :src="d2BgImage"
                            @click="selectImage('2d')"
                            class="img_container"
                            :class="{'small_con':isSmall}"
                        >
                            <div slot="placeholder" class="image-slot">
                                加载中
                                <span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <el-button type="text" @click="selectImage('2d')">点击选择</el-button>
                            </div>
                             <div class="filter_set">

                              </div>
                        </el-image>-->

                        <!-- <div class="selectBtn boxs">
                            <el-button v-if="!d2BgImage" type="text" @click="selectImage('2d')">点击选择</el-button>
                        </div> -->
                    </el-tab-pane>
                    <el-tab-pane label="3D背景：" name="3d">
                      <div >
                            <div
                                v-if="d3Preview"
                                class="img_container"
                                @click="sfxLibraryVisibly = true"
                               
                                :class="{'small_con':isSmall}">
                                <img :src="d3Preview" alt />
                                <p  class="top_panel">
                                  <span title="添加滤镜"> 
                                    <svg class="icon btn" aria-hidden="true" @click.stop="addFilter">
                                    <use xlink:href="#ss-lvjing1"></use>
                                  </svg>
                                  </span>
                                  <span title="删除">
                                    <svg class="icon btn" aria-hidden="true" @click.stop="del3d">
                                    <use xlink:href="#ss-shanchu"></use>
                                  </svg>
                                  </span>
                                  
                                </p>
                                <p class="bottom_panel">
                                    点击更换图片
                                </p>
                            </div>
                            <div v-else class="selectBtn boxs">
                                <el-button
                                    v-if="!d3Preview"
                                    type="text"
                                    @click="sfxLibraryVisibly = true"
                                >点击选择</el-button>
                            </div>
                        </div>
                        <!-- <el-image
                            v-if="d3Preview"
                            fit="contain"
                            :src="d3Preview"
                            @click="sfxLibraryVisibly = true"
                            class="img_container"
                            :class="{'small_con':isSmall}"
                        >
                            <div slot="placeholder" class="image-slot">
                                加载中
                                <span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot selectBtn">
                                <el-button type="text" @click="sfxLibraryVisibly = true">点击选择</el-button>
                            </div>
                        </el-image>
                        <div class="selectBtn boxs">
                            <el-button
                                v-if="!d3Preview"
                                type="text"
                                @click="sfxLibraryVisibly = true"
                            >点击选择</el-button>
                        </div> -->
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="float:left">
                <div style="font-size:14px;width:100px;float:left">背景特效：</div>
                <div style="font-size:14px;float:left">
                   <div >
                            <div
                                v-if="effectPriview"
                                class="img_container"
                                @click="selectImage('3d')"
                                :class="{'small_con':isSmall}">
                                <img :src="effectPriview" alt />
                                
                                <p  class="top_panel">
                               
                                  <span title="删除">
                                    <svg class="icon btn" aria-hidden="true" @click.stop="del3deff">
                                    <use xlink:href="#ss-shanchu"></use>
                                  </svg>
                                  </span>
                                </p>
                                <p class="bottom_panel">
                                    点击更换图片
                                </p>
                            </div>
                            <div v-else class="selectBtn boxs">
                                <el-button
                                    v-if="!effectPriview"
                                    type="text"
                                    @click="selectImage('3d')"
                                >点击选择</el-button>
                            </div>
                        </div>
                    <!-- <el-image
                        v-if="effectPriview"
                        fit="contain"
                        :src="effectPriview"
                        @click="selectImage('3d')"
                        class="img_container"
                        :class="{'small_con':isSmall}"
                    >
                        <div slot="placeholder" class="image-slot">
                            加载中
                            <span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot selectBtn">
                            <el-button type="text" @click="selectImage('3d')">点击选择</el-button>
                        </div>
                    </el-image>
                    <div class="selectBtn">
                        <el-button v-if="!effectPriview" type="text" @click="selectImage('3d')">点击选择</el-button>
                    </div> -->
                </div>
            </div>
            <slot name="right"></slot>
        </el-row>

        <el-dialog
            top="40px"
            :visible="picLibraryVisibly"
            width="800px"
            title="图片库"
            @close="picLibraryVisibly = false"
            append-to-body
            custom-class="library_dialog definedModal"
        >
            <imagesLibrary @selected="selectCurrentImg" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
        <el-dialog
            top="40px"
            :visible="sfxLibraryVisibly"
            width="660px"
            title="3D背景库"
            @close="sfxLibraryVisibly = false"
            append-to-body
            custom-class="definedModal"
        >
            <d3BackgroundLibrary @selected="selectCurrent3dBg" @close="sfxLibraryVisibly = false"></d3BackgroundLibrary>
        </el-dialog>
        <el-dialog
            top="40px"
            :visible="effectLibraryVisibly"
            width="660px"
            title="特效库"
            @close="effectLibraryVisibly = false"
            append-to-body
            custom-class="definedModal"
        >
            <specialLibrary @selected="selectCurrentEffect" @close="effectLibraryVisibly = false"></specialLibrary>
        </el-dialog>
    </div>
</template>

<script>
import imagesLibrary from '../components/views/baseSetting/library/imagesLibrary';
import specialLibrary from '../components/views/baseSetting/library/specialLibrary';
import d3BackgroundLibrary from '../components/views/baseSetting/library/d3BackgroundLibrary';
export default {
    components: {
        imagesLibrary,
        specialLibrary,
        d3BackgroundLibrary,
    },
    props: {
        bgdata: {
            type: String,
            default: '',
        },
        isSmall: {
            type: Boolean,
            default: false,
        },
        width: {
            type: Number,
            default: 120,
        },
    },
    watch: {
        bgdata(n, v) {
            var d = n && JSON.parse(n);
            if (d) {
                this.curTab = d.type;
                this.d2BgImage = d.d2BgImage;
                this.d3BgImage = d.d3BgImage;
                this.d3Effctiv = d.d3Effctiv;
                this.d3Preview = d.d3Preview;
                this.effectPriview = d.effectPriview;
            }
        },
    },
    data() {
        return {
            curTab: '2d',
            d2BgImage: '',
            d3BgImage: '',
            d3Effctiv: '',
            d3Preview: '', // 3d背景预览图
            effectPriview: '', // 3d特效预览图
            sfxLibraryVisibly: false,
            picLibraryVisibly: false,
            effectLibraryVisibly: false,
            showPanel:false,
        };
    },
    methods: {
        addFilter(){
          alert("1234")
        },
        del2d(){
          this.d2BgImage = "";
          this.change();
        },
        del3d(){
          this.d3BgImage = "";
          this.d3Preview = "";
          this.change();
        },
        del3deff(){
            this.d3Effctiv = "";
            this.effectPriview = "";
            this.change();
        },
        selectImage(t) {
            if (t == '2d') {
                this.picLibraryVisibly = true;
            } else if (t == '3d') {
                this.effectLibraryVisibly = true;
            }
        },
        selectCurrentImg(img) {
            if (this.is3D) {
                this.d3BgImage = img.url;
            } else {
                this.d2BgImage = img.url;
            }
            this.change();
        },

        selectCurrent3dBg(data) {
            console.log('data :', data);
            this.d3Preview = data.imgUrl; // 3d背景预览
            this.d3BgImage = data.ddsUrl; // 3d背景文件地址
            this.change();
        },
        selectCurrentEffect(data) {
            // json数据
            this.d3Effctiv = data.effectUrl;
            // 特效预览图
            this.effectPriview = data.bgUrl;
            this.change();
        },
        change() {
            var data = {},
                url;
            if (this.is3D) {
                url = this.d3Preview;
                data = {
                    is3D: this.is3D,
                    type: this.curTab,
                    d2BgImage: '',
                    d3BgImage: this.d3BgImage,
                    d3Preview: this.d3Preview,
                    d3Effctiv: this.d3Effctiv,
                    effectPriview: this.effectPriview,
                };
            } else {
                url = this.d2BgImage;
                data = {
                    is3D: this.is3D,
                    type: this.curTab,
                    d2BgImage: this.d2BgImage,
                    d3BgImage: '',
                    d3Preview: this.d3Preview,
                    d3Effctiv: this.d3Effctiv,
                    effectPriview: this.effectPriview,
                };
            }
            this.$emit('change', JSON.stringify(data), url);
        },
    },
    computed: {
        is3D() {
            return this.curTab === '3d';
        },
    },
};
</script>

<style lang="scss" scoped>
.bg_component {
    padding: 10px 0;
    height: 140px;
    .selectBtn {
        line-height: 100px;
        text-align: center;
    }
    /deep/.el-tabs__item {
        width: 110px;
        height: 60px;
        line-height: 60px;
        padding: 0 10px 20px 0;
    }
    .boxs {
        float: left;
        width: 180px;
    }
    .img_container {
      position: relative;
        width: 200px;
        height: 120px;
        cursor: pointer;
        background-color: #808080;
    }
   
    .img_container img{
      width:100%;
      height: 100%;
      object-fit: contain;
    }
    .img_container:hover{
      .top_panel{
        display: inline-block;
      }
    }
    .icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    .top_panel{
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      height: 35px;
      line-height: 35px;
      color:#fff;
      background-color: rgba(0,0,0,0.5);
      padding-left:6px;
      border-bottom-left-radius:12px;
    }
    .top_panel .btn{
      display: inline-block;
      text-align: center;
      width:30px;
    }
    .bottom_panel{
      position: absolute;
      text-align: center;
      bottom: 0;
      height: 30px;
      line-height: 30px;
      padding:0 10px;
      width:100%;
      background-color: rgba(0,0,0,0.5);
      color:#fff;
    }
    .small_con {
        width: 180px;
    }
    .smallTab {
        width: auto;
        /deep/ .el-tabs__header.is-left {
            width: 113px;
        }
    }
    .filter_set {
        position: absolute;
    }
}
</style>